<template>
  <!-- 面包屑 -->
  <Breadcrumb :items="['home.breadcrumb.home']" />
  <!-- 列表 -->
  <a-row v-if="!loading" :gutter="{ xs: 16, sm: 16, md: 24, lg: 32 }">
    <a-col v-for="item in listData" :key="item.id" :xs="12" :sm="8" :md="8" :lg="8" :xl="6">
      <div class="card" @click="detailCategory(item)">{{ item.name }}</div>
    </a-col>
  </a-row>
  <LoadingSkeketon v-else />
</template>
<script setup lang="ts">
import { onBeforeMount, ref } from "vue"
import { useRouter } from "vue-router"
import { getAllCaseCategory } from "@/api/case/index"
import type { CaseCategoryItem } from "@/api/case/type"
import useLoading from "@/hooks/loading"

const listData = ref<Array<CaseCategoryItem>>([])

const router = useRouter()

onBeforeMount(() => {
  getRenderData()
})

const { loading, setLoading } = useLoading(true)
const getRenderData = async () => {
  try {
    let { data } = await getAllCaseCategory()
    listData.value = data!
  } finally {
    setLoading(false)
  }
}

const detailCategory = (item: CaseCategoryItem) => {
  router.push({ path: "/detail/category", query: { id: item._id } })
}
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
